<template>
    <div class="cart">
      <div class="bian"></div>
      <el-table ref="multipleSelection" :data="carts" tooltip-effect="dark" style="width:100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60" checked="true">
      </el-table-column>
      <el-table-column prop="product.imgPath" label="图片" width="150">
        <template slot-scope="scope">
          <img :src="'/products/' +scope.row.product.imgPath " alt="" width="100%">
        </template>
      </el-table-column>
        <el-table-column prop="product.productName" label="名称" width="290">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="150" style="display:flex;justify-content: space-around;">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleAdd(scope.row)">+</el-button>
            <input type="text" name="" id="" v-model="scope.row.num" style="width:30px;margin:0 5px">
            <el-button size="mini" type="danger" @click="handleMinus(scope.row)">-</el-button>
          </template>
        </el-table-column>
        <el-table-column width="150">
          <template slot="header" slot-scope="scope">
            <span>操作</span>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20">
        <el-col :span="12" :offset="12">
          <div class="grid-content">
            <span>总计:￥{{TotolPrice}}元&nbsp;&nbsp;</span>
            <el-button type="primary" @click="toOrder" class="butt">去结算</el-button>
          </div>
        </el-col>
      </el-row>
      <br>
    <br>
    <br>
    <br> 
      <div class="d0">
        <p class="d9">-&nbsp;&nbsp;&nbsp;推荐商品&nbsp;&nbsp;&nbsp;-</p>
        <el-row type="flex" class="row-bg" justify="space-around" style="flex-wrap:wrap">
        <el-col :span="5" v-for="(product, index) in products" :key="product.id" style="margin-bottom: 20px;">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="'/products/' + product.imgPath" 
          class="image">
          <div style="padding: 14px;">
            <span>{{product.productName}}</span>
            <p class="des">{{product.description}}</p>
            <div class="bottom clearfix">
               <time class="time"></time>
              <el-button type="text" class="button" @click="goDetail(product.id)">查看详情</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'cart',
    data() {
      return {
       carts:[],
       multipleSelection:[],
       products:[]
      }
    },
    created(){
        this.axios.defaults.headers.common['Authorization'] = localStorage['token']
        this.axios.get('/api/getCarts')
            .then(res => {
                console.log('carts:',res.data)
                this.carts = res.data.data
                }),
                this.axios.get('/api/getAllProducts')
        .then(res=>{
          console.log('res:',res.data.data)
          this.products = res.data.data
        })
  },methods:{
    handleSelectionChange(val){
      console.log('val:',val)
      this.multipleSelection = val;
    },
    handleAdd(row){
      row.num++
    },
    handleMinus(row){
      row.num--
    },
    handleDelete(index){
      let id = this.carts[index]._id
      this.carts.splice(index, 1)
      this.axios.defaults.headers.common['Authorization'] = localStorage['token']
      this.axios.delete('/api/deleteCart',{ params: {id} })
        .then(res => {
          this.$message('删除成功！')
        })
        .catch(err => {
          this.$message('删除失败！')
        })
    },
    toOrder(){
      this.$router.push({path:'/setOrder',query:{data:JSON.stringify(this.multipleSelection)}})
    },
    goDetail(pId){
        this.$router.push('/detail?productId=' + pId)
       }

  },
  computed: {
    TotolPrice(){
      let total = 0
      this.multipleSelection.map(item => {
        total += parseInt(item.product.price) * parseInt(item.num)
      })
      return total
    }
  }
}
  </script>
  <style scoped lang="scss">
    .cart {
      width: 1000px;
      position: relative;
      left:15%
    }
   .grid-content .butt{
	width: 100px;
	height: 40px;
	background-color: #F56C6C;
	border: 0px;
	font-size: 16px;
}
// .grid-content span{
//   position: absolute;
//   left: 5px;
// }
.grid-content{
  margin-top: 10px;
  float: left;
  
}
    .d0{
      width:100%;

    }
    .image {
    width: 100%;
    display: block;
    position: relative;
    right: 5px;
  }
    .d9{
      font-size: 20px;
      font-family: "微软雅黑";
      text-align: center;
    }
    .el-row{
      &:last-child{
        margin-bottom: 0;
      }
    }
    nav {
      padding: 30px;
    
      a {
        font-weight: bold;
        color: #2c3e50;
    
        &.router-link-exact-active {
          color: #42b983;
        }
      }
    }
    </style>
  
  